// 雷达图
import { ChartStrategy } from "@@/composables/useECharts"
import { EChartsOption, RadarSeriesOption, graphic } from "echarts"
import { RadarOption } from "echarts/types/dist/shared"
import { RadarSeriesDataItemOption } from "echarts/types/src/chart/radar/RadarSeries.js"

export class RadarOptionStrategy implements ChartStrategy {
  getOptions(options: EChartsOption | null): EChartsOption {
    const raderOption = options && (options.radar as RadarOption[])[0]
    const seriesData = options && ((options.series as RadarSeriesOption[])[0].data as RadarSeriesDataItemOption[])[0]
    const resOptions: EChartsOption = {
      legend: {},
      radar: [
        {
          center: ["50%", "55%"],
          indicator: raderOption?.indicator,
          radius: 120,
          axisName: {
            color: "#fff",
            borderRadius: 3,
            fontSize: 16,
            padding: [3, 5]
          }
        }
      ],
      //@ts-ignore
      series: [
        {
          type: "radar",
          radarIndex: 0,
          data: [
            {
              value: seriesData?.value,
              areaStyle: {
                color: new graphic.RadialGradient(0.1, 0.6, 1, [
                  {
                    color: "rgba(68, 193, 248, 0.1)",
                    offset: 0
                  },
                  {
                    color: "rgba(68, 193, 248, 0.9)",
                    offset: 1
                  }
                ])
              },
              lineStyle: {
                color: "rgb(68, 193, 248)",
                type: "dashed"
              },
              label: {
                show: true,
                formatter: function (params) {
                  return params.value
                }
              }
            }
          ]
        }
      ]
    }
    return resOptions
  }
}
